<script setup lang="ts">
import { addCartItme } from "@/api/cart/cartItem";
import { getFavoriteList, upFavorite } from "@/api/favorite/favorite";
import router from "@/router";
import type { Product } from "@/types";
import { ref } from "vue";
interface Favorite {
  favoriteId: number;
  userId: number;
  productId: number;
  product: Product;
  createTime: string;
  isActive: number;
}
interface CartItem {
  productId: number | null;
  quantity: number;
  priceSnapshot: number | null;
  addedAt: string;
  isChosen: number;
}
const cartItem = ref<CartItem>({
  productId: null,
  quantity: 1,
  priceSnapshot: null,
  addedAt: "",
  isChosen: 0,
});
const loading = ref(false);
const goodsList = ref<Favorite[]>([]);
async function load() {
  loading.value = true;
  await getFavoriteList().then((response) => {
    goodsList.value = response.data.rows;
  });
  loading.value = false;
}
// 取消收藏
async function upFavoriteButton(item: Favorite) {
  await upFavorite(item);
  load();
}
//加入采花车按钮
const addCartItemButton = async (item: Product) => {
  cartItem.value.priceSnapshot = item.price;
  cartItem.value.productId = item.productId;
  await addCartItme(cartItem.value).then((response) => {
    console.log(response.data.msg);
  });
  router.push("/cart");
};
load();
</script>
<template>
  <el-card
    v-if="goodsList.length > 0"
    shadow="hover"
    v-for="item in goodsList"
    :key="item"
    class="card-item"
    style="width: 210px; margin: 10px; display: inline-block"
    v-loading="loading"
  >
    <el-image
      @click="router.push('/product/detail/' + item.product.productId)"
      style="width: 100%; height: 200px"
      :src="item.product.img"
      fit="cover"
    />
    <template #footer>
      <div>
        <div
          style="margin-left: 5px"
          @click="router.push('/product/detail/' + item.product.productId)"
        >
          <el-text truncated tag="b">
            {{ item.product.name }} {{ item.product.description }}
          </el-text>
        </div>
        <div style="float: left; margin-left: 5px; margin-bottom: 5px">
          <el-text class="mx-1" type="danger" size="large"
            >￥{{ item.product.price }}
            <el-text class="mx-1" type="danger" size="small">到手价</el-text>
            <el-text class="mx-1" type="danger" size="small" style="margin-left: 10px"
              >销量{{ item.product.stock }}</el-text
            >
          </el-text>
        </div>
      </div>
      <div>
        <el-button
          @click="addCartItemButton(item.product)"
          style="width: 50%; border-radius: 0"
          >加入采花车</el-button
        ><el-button
          style="width: 50%; margin-left: 0; border-radius: 0"
          @click="upFavoriteButton(item)"
          >取消收藏</el-button
        >
      </div>
    </template>
  </el-card>
  <el-empty description="还没有收藏呢~" v-else>
    <el-button @click="router.push('/home')" type="primary">去逛逛</el-button>
  </el-empty>
</template>
<style lang="less">
.card-item {
  .el-card__body {
    padding: 0;
  }
  .el-card__footer {
    padding: 0;
  }
}
</style>
